<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>部门管理</title>
    <link rel="stylesheet" href="${ctx}/static/support/bootstrap-tree/tree.css" type="text/css" />
  </head>
  <body>
    <div class="container-fluid">
      <!-- 路径导航 -->
	  <ol class="breadcrumb">
	    <li><a href="${ctx}/workbench">主页</a></li>
	    <li class="active">部门管理</li>
	  </ol>
	  <!-- /路径导航 -->
	  
	  <!-- 警告框 -->
	  <c:if test="${not empty message}">
	    <div class="alert alert-${message.state} alert-dismissible" role="alert">
	      <button type="button" class="close" data-dismiss="alert">
	        <span aria-hidden="true">&times;</span>
	        <span class="sr-only">关闭</span>
	      </button>
	      ${message.message}
	    </div>
	  </c:if>
	  <!-- ／警告框 -->
	  
	  <div class="row">
	    <div class="col-sm-4">
	      <div class="panel panel-default">
	        <div class="panel-heading">
	          <h3 class="panel-title">部门树</h3>
	        </div>
	        
	        <div class="panel-body" id="departmentTree">
	        </div>
	      </div>
	    </div>
	    
	    <!-- 记录部门树的当前的节点编号. -->
	    <input type="hidden" id="nodeid"/>
	    
	    <div class="col-sm-8">
	      <div class="panel panel-default">
	        <div class="panel-heading">
	          <h3 class="panel-title">部门列表</h3>
	        </div>
	        <div class="panel-body">
	          <form class="form-inline" action="#" role="form">
	            <div class="form-group">
	              <label for="department-name">部门名</label>
	              <input type="text" class="form-control" id="department-name" name="name" placeholder="部门名" >
	            </div>
	            <button type="button" class="btn btn-default" id="search-id" onclick="search()">查询</button>
	            <tags:sort_json/>
	          </form>
	      
	          <!-- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格.-->
	          <!-- 其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失 -->
	          <div class="table-responsive">
	            <!-- table-page 没有实际样式，仅作为 Json Table 的标记. 自定义-->
	            <table class="table table-hover table-page">
	              <thead></thead>
	              <tbody></tbody>
	            </table>
	          </div>
	      
	          <div class="pull-right" id="pagination">
	          </div>
	          
	          <div class="pull-left">
	            <a class="btn btn-default" href="${ctx}/department/create">添加部门</a>
	          </div>
	      
	        </div>
	      </div>
	    </div>
	  </div>
	  
	</div>
	
    <!-- 以下开始 加载JS动态效果 -->
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${ctx}/static/jquery/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${ctx}/static/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
    
    <!-- bootstrap-tree 自定义树 -->
	<script src="${ctx}/static/support/bootstrap-tree/bootstrap.asynchronous.tree.js"></script>
	<!-- bootstrap-table 自定义表格 -->
	<script src="${ctx}/static/support/bootstrap-table/bootstrap.table.js"></script>
    
    <script type="text/javascript">
      jQuery(document).ready(function() {
    	  Tree.setPath("${ctx}");  //设置项目路径
    	  jQuery.ajax({
    		  url: "${ctx}/department/asyn_tree",
    		  type: "post",
    		  dataType: "json",
    		  success: function(msg) {
    			  Tree.setData(msg);
    			  Tree.init("#departmentTree");
    			  Tree.onClick(function(node){
    				  $("#nodeid").val(node.id);
    				  Table.load("${ctx}/department?sortType="+$("#sortTypeKey").val()+searchParams());
    				  });
    			  }
    		  });
    	  
    	  var thead={idField:"id",columns:[{field:"id",title:"编号"},{field:"name",title:"部门"}]};
		  Table.setHead(thead);
		  Table.load("${ctx}/department");
    	  
    	  });
      
    	//分页
		function page(page){
			Table.load("${ctx}/department?sortType="+$("#sortTypeKey").val()+"&page="+page+searchParams());
		};
		
		//查询
		function search(){
			Table.load("${ctx}/department?sortType="+$("#sortTypeKey").val()+searchParams());
		}
		
		//排序
		function sort(sortType,value){
			$("#sortTypeValue").html(value);
			$("#sortTypeKey").val(sortType);
			Table.load("${ctx}/department?sortType="+sortType+searchParams());
		}
		
		//查询条件
		function searchParams(){
			var searchParams='';
			if($("#nodeid").val()!=""){
				searchParams=searchParams+'&nodeid='+$("#nodeid").val();
			}
			if($("#department-name").val()!=""){
				searchParams=searchParams+'&name='+$("#department-name").val();
			}
			return searchParams;
		}
    </script>
    
  </body>
</html>